<!--
 * @Author: your name
 * @Date: 2021-04-13 15:30:49
 * @LastEditTime: 2021-06-24 08:49:13
 * @LastEditors: g05047
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\addMemberModal.vue
-->
<template>
    <!-- 添加成员Modal -->
    <a-modal :visible="memberModal" title="添加人员" ok-text="保存" @ok="handleOk" @cancel="handleCancel" :afterClose="onCloseModal" :z-index="99">
        <a-form-model ref="addMember" :model="addMemberState" :rules="addMemberRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
            <a-form-model-item label="角色名称" prop="name">
                <a-input v-model="addMemberState.name" :disabled="disabled" placeholder="输入内容" allow-clear />
            </a-form-model-item>
            <a-form-model-item label="选择成员" prop="memberList">
                <a-select mode="multiple" :label-in-value="false" :value="addMemberState.memberList" option-label-prop="label" placeholder="请搜索员工！" :filter-option="false" @search="fetchUser" @change="handleChange">
                    <a-select-option v-for="item in memberList" :key="item.id" :value="item.id" :label="item.realName">{{ item.realName }}-----{{ item.workId }}</a-select-option>
                </a-select>
            </a-form-model-item>
        </a-form-model>
    </a-modal>
</template>

<script>
import { queryMember } from '@/services/staff';
export default {
    name: 'addMemberModal',
    props: {
        memberModal: {
            type: Boolean,
            default: false,
        },
        roleName: String,
    },
    data() {
        return {
            addMemberState: {
                name: '',
                memberList: [],
            },
            addMemberRules: {
                name: [{ required: true, message: '角色名称不允许为空！', trigger: 'blur' }],
                memberList: [{ required: true, message: '成员不允许为空!', trigger: 'change' }],
            },
            disabled: false,
            memberList: [],
        };
    },
    watch: {
        roleName: {
            handler(val) {
                if (val) {
                    this.addMemberState.name = val;
                    this.disabled = true;
                }
            },
            immediate: true,
        },
    },
    methods: {
        handleOk() {
            const that = this;
            that.$refs.addMember.validate(valid => {
                if (valid) {
                    that.$emit('cancelModal', {
                        modal: '添加人员',
                        success: 'ok',
                        data: that.addMemberState,
                    });
                } else {
                    return false;
                }
            });
        },
        handleCancel() {
            this.$refs.addMember.resetFields();
            this.$emit('cancelModal', {
                modal: '添加人员',
                success: 'cancel',
                data: true,
            });
        },
        onCloseModal() {
            this.handleCancel();
        },
        fetchUser(value) {
            if (value.length >= 2) {
                this.getMember(value);
            }
        },
        handleChange(value) {
            this.addMemberState.memberList = value;
        },
        /**
         * @description: 模糊查询员工
         * @param {*}
         * @return {*}
         */
        getMember(realName) {
            queryMember({ realName }).then(res => {
                if (res.data.code == 200) {
                    const data = res.data.data;
                    this.memberList = data;
                }
            });
        },
    },
};
</script>

<style></style>
